<template>
  <div class="play_detail_wrap">
    <div class="top">
      <div class="left">
        <div class="img_box">
          <img :src="playStore.playInfo.coverImgUrl" />
        </div>
      </div>
      <div class="right">
        <div class="title_box">
          <span>{{ playStore.playInfo.name }}</span>
        </div>
        <div class="auth_box">
          <img :src="playStore.playInfo.creator.avatarUrl" />
          <span class="auth">{{ playStore.playInfo.creator.nickname }}</span>
          <span class="create_time"
            >{{
              myUtils.itmeToStringFunc(playStore.playInfo.createTime)
            }}创建</span
          >
        </div>
        <div class="tag_box">
          <span class="label">标签：</span>
          <div class="tag_list_box">
            <a-tag
              v-for="(tg, index) in playStore.playInfo.tags"
              :key="index"
              color="#108ee9"
              >{{ tg }}</a-tag
            >
          </div>
        </div>
        <div class="introduce_box">
          <span>介绍:{{ playStore.playInfo.description }}</span>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="header">
        <div class="left">
          <span class="title">歌曲列表</span>
          <span class="count">{{ playAllSongs.length }}首歌</span>
        </div>
        <div class="right">
          <span class="label">播放：</span>
          <span class="value">{{ playStore.playInfo.playCount }}</span>
          <span class="unit">次</span>
        </div>
      </div>
      <div class="song_box">
        <a-list
          :loading="isSongsListLoading"
          size="small"
          bordered
          :data-source="playAllSongs"
          style="
            height: 600px;
            overflow: scroll;
            overflow-y: scroll;
            overflow-x: hidden;
          "
        >
          <template #renderItem="{ item, index }">
            <a-list-item @click="songItemClick(item)">
              <div class="song_item_box">
                <div class="index">
                  {{ index + 1 }}
                </div>
                <div class="song_name">
                  {{ item.name }}
                </div>
                <div class="singer">{{ item.ar[0].name }}</div>
                <div class="collection">{{ item.al.name }}</div>
              </div>
            </a-list-item>
          </template>
        </a-list>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
export default defineComponent({
  name: "PlayDetail",
});
</script>
<script lang="ts" setup>
import { useRouter } from "vue-router";
import { usePlayStore } from "@/store";
import myUtils from "@/utils/myUtils.ts";
import { getPlaySongListDataApi, getSongUrlApi } from "@/api/home.ts";

const router = useRouter();
const playStore = usePlayStore();

// 歌曲点击事件
const songItemClick = (song: any) => {
  playStore.songInfo = song;
  router.push({ path: "/songDetail" });
};

// 歌单所有歌曲
const playAllSongs = ref([]);

// 歌曲列表加载的标识
const isSongsListLoading = ref(false);

// 获取歌单所有歌曲的函数
const getPlaySongListFunc = async () => {
  isSongsListLoading.value = true;
  await getPlaySongListDataApi({
    id: playStore.playInfo.id,
    limit: 1000000,
    offset: 0,
  }).then((res) => {
    isSongsListLoading.value = false;
    playAllSongs.value = res.songs;
  });
  console.log(playAllSongs.value);
};

// 初始化
onMounted(() => {
  getPlaySongListFunc();
});
</script>

<style lang="scss" scoped>
.play_detail_wrap {
  margin: 0 auto;
  width: 1080px;
  // height: 100%;
  display: flex;
  flex-direction: column;
  // border: 1px solid red;
  .top {
    padding: 26px 30px;
    display: flex;
    flex-direction: row;
    height: 260px;
    // border: 1px solid red;
    .left {
      margin-right: 30px;
      .img_box {
        padding: 3px;
        border: 1px solid #d5d5d5;
        img {
          width: 200px;
          height: 200px;
        }
      }
    }
    .right {
      width: 100%;
      display: flex;
      flex-direction: column;
      // border: 1px solid red;

      .title_box {
        padding-left: 6px;
        // border: 1px solid red;
        height: 50px;
        line-height: 50px;
        font-size: 20px;
        font-family: "宋体";
      }
      .auth_box {
        padding: 6px;
        // border: 1px solid red;
        height: 50px;
        line-height: 30px;

        img {
          width: 35px;
          height: 35px;
        }

        .auth {
          margin-left: 10px;
          font-family: "黑体";
          font-size: 12px;
        }

        .create_time {
          margin-left: 20px;
          font-family: "黑体";
          font-size: 12px;
          color: gray;
        }
      }
      .tag_box {
        // border: 1px solid red;
        height: 50px;
        line-height: 50px;
        padding-left: 6px;
        display: flex;
        flex-direction: row;

        .label {
          font-size: 12px;
          font-family: "黑体";
        }
      }
      .introduce_box {
        // border: 1px solid red;
        height: 55px;
        padding: 4px 6px;
        font-size: 12px;
        font-family: "黑体";
        color: gray;
        text-wrap: wrap;
        overflow: hidden;
        text-overflow: ellipsis; //文本溢出显示省略号
        // white-space: nowrap; //文本不会换行
      }
    }
  }
  .bottom {
    display: flex;
    flex-direction: column;
    // height: 260px;
    // border: 1px solid red;

    .header {
      // border: 1px solid red;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 0 34px;

      .left {
        .title {
          font-size: 22px;
          font-family: "幼圆";
          margin-right: 20px;
        }
        .count {
          font-size: 14px;
          font-family: "黑体";
          color: gray;
        }
      }

      .right {
        padding-top: 6px;
        font-size: 14px;
        font-family: "黑体";
        color: gray;
        .value {
          color: #1b8fe6;
          font-weight: bold;
          margin-right: 4px;
        }
      }
    }

    .song_box {
      margin-top: 10px;
      padding: 5px 32px;
      // border: 1px solid red;

      .song_item_box {
        // cursor: pointer;
        display: flex;
        flex-direction: row;

        .index {
          width: 20px;
          font-size: 12px;
          line-height: 22px;
          margin-right: 10px;
          color: gray;
        }

        .song_name {
          overflow: hidden;
          text-overflow: ellipsis; //文本溢出显示省略号
          white-space: nowrap; //文本不会换行
          width: 500px;
          height: 20px;
          cursor: pointer;
        }

        .singer {
          width: 200px;
          overflow: hidden;
          height: 20px;
          text-overflow: ellipsis; //文本溢出显示省略号
          white-space: nowrap; //文本不会换行
        }
        .collection {
          width: 200px;
          overflow: hidden;
          height: 20px;
          text-overflow: ellipsis; //文本溢出显示省略号
          white-space: nowrap; //文本不会换行
        }
      }
    }
  }
}

::v-deep .ant-list-bordered {
  border-radius: 0px;
}
</style>
